<template>
	<view class="wf-page">
		<view class="" id="left">
			<!-- <view class="wf-item wf-left-item" >
				<WaterfallsFlowItem direction="left" index="0" :item="items" :h5Img="h5Img" @addCart="addCart" />
			</view> -->
			<template v-for="(items,index) in wfList" v-if="(index+1)%2 === 1">
				<view class="wf-item" @tap="itemTap(items)">
					<WaterfallsFlowItem direction="right" :index="index" :item="items" @addCart="addCart" :hasLogin="hasLogin" :showBeforeLogin="showBeforeLogin"/>
				</view>
			</template>
		</view>
		<view class="" id="right">
			<template v-for="(items,index) in wfList" v-if="(index+1)%2 === 0">
				<view class="wf-item" @tap="itemTap(items)">
					<WaterfallsFlowItem direction="right" :index="index" @addCart="addCart" :item="items" :hasLogin="hasLogin" :showBeforeLogin="showBeforeLogin"/>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItem.vue'
	export default {
		components: {
			WaterfallsFlowItem
		},
		props: {
			// 瀑布流列表
			wfList: {
				type: Array,
				require: true
			},
			updateNum: {
				type: Number,
				default: 10
			},
			h5Img: {
				type: String,
				default: ''
			},
			hasLogin: {
				type: Boolean,
				default: false
			},
			showBeforeLogin: {
				type: String|Number,
				default: ''
			}
		},
		data() {
			return {
				allList: [], // 全部列表
				leftList: [], // 左边列表
				rightList: [], // 右边列表
				mark: 0, // 列表标记
				boxHeight: [], // 下标0和1分别为左列和右列高度
			};
		},
		watch: {
			async wfList(val) {
				if (this.wfList.length === 0 ||
					(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
					this.allList = [];
					this.leftList = [];
					this.rightList = [];
					this.boxHeight = [];
					this.mark = 0;
				}

				if (this.wfList.length) {
					this.allList = [];
					this.leftList = [];
					this.rightList = [];
					// this.boxHeight = [];
					this.mark = 0;
					this.allList = this.wfList;
					// this.$set(this.allList[0], 'type', '1')
					await this.waterFall()
				}
			},
			async mark() {
				const len = this.allList.length;
				if (this.mark < len && this.mark !== 0) {
					await this.waterFall();
				}
			}
		},
		methods: {
			async waterFall() {
				const i = this.mark;
				if (i === 0) {
					this.leftList.push(this.allList[i]);
					await this.getViewHeight(0);
				} else if (i === 1) {
					this.rightList.push(this.allList[i]);
					await this.getViewHeight(1);
				} else {
					const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
					if (leftOrRight) {
						this.rightList.push(this.allList[i])
					} else {
						this.leftList.push(this.allList[i])
					}
					await this.getViewHeight(leftOrRight);
				}
			},
			async getViewHeight(leftOrRight) {
				const query = uni.createSelectorQuery().in(this);
				const id = leftOrRight ? '#right' : '#left';
				await setTimeout(() => {
					query.select(id).boundingClientRect(res => {
						this.boxHeight[leftOrRight] = res.height;
						this.mark = this.mark + 1;
					}).exec();
				}, 50)
			},
			itemTap(item) {
				this.$emit('itemTap', item)
			},
			addCart(item) {
				this.$emit('addCart', item)
			}

		}
	}
</script>

<style lang="scss" scoped>
	$page-padding:20rpx;
	$grid-gap:20rpx;

	.wf-page {
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.wf-item {
		width: 100%;
		padding-bottom: $grid-gap;
	}
	
	#left,#right{
		width: calc((100vw - #{$page-padding}) / 2);
	}

	.wf-left-item {
		padding: -81rpx;
	}
</style>
